<template>
	<view id="achievement">
		<view class="u-navbar">
			<view class="u-back-icon"  @tap="goBack">
				<my-icon name="back"  size="28upx" style="color: #fff;"></my-icon>
			</view>
			<view class="u-navbar-content-title">
				<view  class="u-title u-line-1">每日一练</view>
			</view>
		</view>
		<!-- <u-navbar :border-bottom="false" title="每日一练" title-color="#fff" back-icon-color="#fff"></u-navbar> -->
		<view class="topic-info" v-if="result">
			<view>
				<text class="right" >{{result.duration1}}</text>
				<view class="undoTxt">耗时<text style="color: #A1A2A6;"></text></view>
			</view>
			<view>
				<text class="wrong">{{result.totalErrorCount}}</text>
				<text>错题数</text>
			</view>
			<view>
				<text class="undo">{{result.rightsquescou/result.quescou*100}}</text>
				<view class="undoTxt">正确率<text style="color: #A1A2A6;">(%)</text></view>
			</view>
		</view>

		<view class="action">
			<view class="actionFirst" @click="review(0)">
				<image src="../../static/achievement/wrong.png"></image>
				<text>查看错题</text>
			</view>
			<view @click="review(1)">
				<image src="../../static/achievement/review.png"></image>
				<text>回顾试卷</text>
			</view>
		</view>

		<!-- <u-button  class="button" shape="circle" :ripple="true">分享</u-button> -->
	<!-- 	<view class="taskBot">
			<view class="header">
				<text class="tit">答题卡</text>
				<text class="txt">(点击题目序号可跳转到该题)</text>
			</view>
			<view class="signAnswer">
				<view>1</view>
				<view>2</view>
			</view>

		</view> -->
	</view>
</template>

<script>
	import exam from '../../mixins/exam.js';
  export default {
		mixins: [exam],
		data() {
			return {
				result: null, //考试成绩信息
				reexamHandler: null, //重考处理
				reload: null ,//点击返回时，是否刷新目标页面数据
				rexamFalse:false,//重考按钮显示
			};
		},
		onLoad({ upid, reload = true, reexamHandler }) {
			this.reload = reload;
			this.reexamHandler = reexamHandler;
			this.request
				.get(`/app/proposition/getTranscript`, {
					upid
				})
				.then(res => {
					this.result = res;
					this.rexamFalse=res.ueid;
				});
		},
		methods:{
			//回顾试题
     review(isCorrect) {
     	const { upid, paperid, errorsquescou, rightsquescou } = this.result;
     	const apiSetting = {
     		method: 'get',
     		url: '/app/proposition/getlookBackQuestion',
     		params: {
     			upid,
     			paperid,
     			isCorrect
     		}
     	};
     	let setting={
     		correctCount: this.result.rightsquescou,
     		errorCount: this.result.errorsquescou
     	}
     	const answerPageSetting = {
     		navTitle: isCorrect ? '回顾试题' : '查看错题',
     		correcting: true,
     		showFalseCount: false,
     		showRightCount: false,
     		correctCount:this.result.rightsquescou,
     		errorCount:this.result.errorsquescou
     	};

     	this.startAnswer(apiSetting, answerPageSetting);
     },
			// 返回
			goBack(){
				uni.navigateBack({
					delta:1
				});
			}
		}
	}

</script>
<style lang="scss">
#achievement {
	width: 100%;
	height: 100%;
	background: url(../../static/daily/designBg.png) no-repeat;
	background-size: 100% 358upx;
	.u-title{ color:#fff; text-align: center; font-size:32upx}
	.u-navbar{background: none!important; height:44px; line-height: 44px;padding-top: 60upx;}
	.u-back-icon{ position: absolute; padding: 0 30upx; z-index:1000}
	.topic-info {
		height: 200upx;
		width: 690upx;
		margin: 0 auto;
		background: #ffffff;
		border-radius: 30upx;
		margin-top: 147upx;
		box-shadow: 0px 4upx 16upx 0px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		text-align: center;
		view {
			display: flex;
			flex-direction: column;
			text:first-child {
				font-size: 48upx;
				font-weight: bold;
			}
			text {
				font-size: 30upx;
				font-weight: 400;
				color: #363940;
			}

			.wrong {
				color:#FFB11D;
			}
			.right {
				color:#3691FD;
			}
			.undo {
				color:#5FBA4A;
			}
		}
	}
}
.action {
		height: 110upx;
		width: 670upx;
		margin: 0 auto;
		background: #ffffff;
		border-radius: 24upx;
		box-shadow: 0px 4upx 16upx 0upx rgba(0, 0, 0, 0.1);
		margin-top: 50upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: relative;
		view {
			display: flex;
			align-items: center;
			image {
				width: 40upx;
				height: 40upx;
				margin-right: 22upx;
			}
		}
		text{
			font-size: 32upx;
		}
	}
	.action::after{
		content: '';
		display: block;
		width: 1px;
		background: #E6E6E6;
		height: 60%;
		position: absolute;
		left: 50%;
		top: 20%;
	}
.undoTxt{
	flex-direction:initial!important;
	justify-content: center;
	text{
		font-size: 26upx!important;
		color: #A1A2A6!important;
		font-weight: normal!important;
	}
}
.button {
	position: absolute;
	bottom: 80upx;
	left: 50%;
	margin-left: -175upx;
	width: 350upx;
	height: 76upx;
	font-size: 32upx;
	background: $linear-bg;
	color: #ffffff !important;
}
.button::after {
	border: none !important;
}
.taskBot{
	width: 670upx;
	margin: 0 auto;
	margin-top: 60upx!important;
	.signAnswer{
		width: 100%;
		display: flex;
		justify-content: start;
		align-items: center;
		view{
			width: 88upx;
			height: 88upx;
			line-height: 88upx;
			margin-right: 52upx;
			background: #fff;
			border: 1px solid #C6C8CC;
			border-radius: 88upx;
			color: #C6C8CC;
			font-size: 32upx;
			text-align: center;
			font-weight: 500;
		}
	}

}
	.header {
		display: flex;
		align-items: center;
		justify-content: start;
		margin-bottom: 50upx;
		.tit{
			font-size: 34upx;
			font-weight: 600;
			color: #363940;
			position: relative;
		}
		.txt{
			color: #A9ABB0;
			font-size: 28upx;
			margin: 0 20upx;
		}
	}
</style>
